<template>
	<view class="login">
		<view>
			<!-- <image src="../../static/image/8.png" class="back_icon mart_90" @click="back"></image> -->
			<common-navbar title="登录" />
			<view class="login_message">{{type=='phone'?'验证码登录后操作':'密码登录后操作'}}</view>

		</view>

		<view>
			<view class="login_line">
				<view class="login_label">手机号</view>
				<view class="login_inp">
					<input type="number" v-model="phone" placeholder="请输入手机号码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="width" :show-confirm-bar="false" />
				</view>
			</view>

			<view class="login_line" v-if="type == 'phone'">
				<view class="login_label">验证码</view>
				<view class="login_inp">
					<input type="number" v-model="code" placeholder="请输入收到的验证码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="inputs" maxlength="6"
						:show-confirm-bar="false" />
					<text @click="$u.throttle(getCode, 800)" class="tips"
						:style="{color: isGetCodeButtonDisabled ? '#0078fb' : '#6e6e73'}">{{tips}}</text>
				</view>
			</view>

			<view class="login_line" v-else-if="type == 'pass'">
				<view class="login_label">密码</view>
				<view class="login_inp">
					<input type="password" v-model="password" placeholder="请输入密码"
						placeholder-style="color: #e1e1e1; fontSize: 32rpx;" class="width" maxlength="15"
						:show-confirm-bar="false" />
				</view>
			</view>
		</view>

		<view style="margin-top: 180upx;">
			<view>
				<u-button :custom-style="customStyle" shape="circle" @click="type=='pass'?passwordLogin():codeLogin()"
					throttle-time='1000' :class="{'isDisabled':isLoginButtonDisabled}">
					{{type=='pass'?'密码登录':'验证码登录'}}
				</u-button>
				<view class="pass_login">
					<text class="change_type" @click="changeLoginType">{{type=='pass'?'验证码登录':'密码登录'}}</text>
				</view>
			</view>
		</view>

		<view class="mart_30">
			<u-checkbox-group :wrap="true">
				<u-checkbox v-model="checked" :label-disabled="true" size='40'>
					<view class="size_24" :class="flag ? 'animate' : ''">
						登录即代表同意<text class="fb7" @click="toagreeandservices(1)">《用户服务协议》</text>和<text class="fb7"
							@click="toagreeandservices(2)">《用户隐私政策》</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<u-verification-code :seconds="seconds" @start="codeCountDownstart" ref="loginCode" @change="codeChange"
			keep-running unique-key="loginCode">
		</u-verification-code>
	</view>
</template>

<script>
	// import IM from "@/lib/IMServer.js"
	export default {
		data() {
			return {
				show: false,
				type: '',
				phone: '',
				password: '',
				code: '',
				tips: '获取验证码',
				seconds: 60,
				customStyle: {
					color: '#ffffff',
					background: '#0078fb',
					fontSize: '32rpx',
					padding: '45rpx 0'
				},
				checked: false,
				flag: false,
			}
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
			} else {
				this.type = 'phone'
			}
		},
		computed: {
			isGetCodeButtonDisabled() {
				return this.$u.test.mobile(this.phone) && (this.tips == '获取验证码' || this.tips == '重新获取');
			},
			isLoginButtonDisabled() {
				if (this.type == 'pass') {
					return !(this.$u.test.mobile(this.phone) && this.$u.test.rangeLength(this.password, [6, 15]) && this
						.checked)
				} else if (this.type == 'phone') {
					return !(this.$u.test.mobile(this.phone) && this.code.length == 6 && this.checked)
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			codeChange(text) {
				this.tips = text;
			},
			codeCountDownstart() {
				this.$showToast('验证码已发送')
			},
			async codeLogin() {
				if (!this.$u.test.mobile(this.phone)) {
					return this.$showToast('请输入正确格式的手机号')
				} else if (this.code.length != 6) {
					return this.$showToast('请输入6位数验证码')
				} else if (!this.checked) {
					return this.$showToast('请同意服务条款后登录')
				}
				const wechat_code = (await wx.login()).code;
				const {
					data
				} = await this.$u.post(this.$restUrl.loginByPassword, {
					phone: this.phone,
					code: this.code,
					operation: 1,
					wechat_code,
				})
				console.log(data);
				this.handlerLogin(data);
			},
			async passwordLogin() {
				if (!this.$u.test.mobile(this.phone)) {
					return this.$showToast('请输入正确格式的手机号')
				} else if (!this.$u.test.rangeLength(this.password, [6, 15])) {
					return this.$showToast('请输入6-15位密码')
				} else if (!this.checked) {
					return this.$showToast('请同意服务条款后登录')
				}
				const wechat_code = (await wx.login()).code;
				// return console.log(wechat_code)
				const {
					data
				} = await this.$u.post(this.$restUrl.loginByPassword, {
					phone: this.phone,
					password: this.password,
					operation: 2,
					wechat_code,
				})
				this.handlerLogin(data);
			},
			changeLoginType() {
				this.password = '';
				this.code = '';
				this.type == 'pass' ? this.type = 'phone' : this.type = 'pass';
			},
			async getCode() {
				if (this.$u.test.mobile(this.phone) && this.$refs.loginCode.canGetCode) {
					await this.$u.get(this.$restUrl.getRegisterCode, {
						phone: this.phone
					});
					//验证码倒计时开始
					this.$refs.loginCode.start();
				}
			},
			async handlerLogin(data) {
				try {
					//设置本地已登录用户标识
					this.setCurrentUserLabel(data.customer_id);
					//拿本地数据
					this.getUserLocalStorage();
					//存储token
					this.setTokeSync(data.token);
					//存储环信token
					this.setHXTokeSync(data.hx_token);
					//获取用户信息
					const userInfo = await this.getUserInfo();
					console.log(userInfo)
					//讲用户信息存储在本地做持久化登录
					this.$u.vuex('userInfo', userInfo.data);
					//用户信息判断，如果没有身份就是上一次注册选身份时退出了，如果没有名称头像性别所在地区就是上一次注册时完善信息时退出了，要跳转到对应页面完善信息
					if (!this.userInfo.customer_type) {
						console.log('没有选身份，跳转到选择身份页面', this.userInfo.customer_type)
						this.$u.route('/pages_login/select_identity/selectIdentity');
					} else
					if (!this.userInfo.nickname || !this.userInfo.avatars || !this.userInfo.sex) {
						console.log('没有完善用户信息，跳转到完善用户信息页面', this.userInfo)
						this.$u.route('/pages/authentication/authentication');
					} else {
						console.log('跳转到首页')
						//全局登录状态resolve
						this.$loginResolve();
						//登录环信
						getApp().globalData.webSocketConnect();
						//跳转到首页
						uni.switchTab({
							url: "pages/home/home"
						})
					}
				} catch (err) {
					console.log(err)
					//删除本地用户标识
					this.removeCurrentUserLabel();
					//删除token
					this.removeTokenSync();
					//删除环信token
					this.removeHXTokenSync();
				}
			},
			getUserInfo() {
				return this.$u.post(this.$restUrl.getUserInfo);
			},
			toagreeandservices(type) {
				if (type == 1) {
					this.$u.route('/pages/agreeandservices/servicesAgreement')
				} else if (type == 2) {
					this.$u.route('/pages/agreeandservices/privacyPolicy')
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./login.scss";
</style>
